<template>  
  <div id="app">  
    <nav>  
      <ul>  
     
        <li><router-link to="/">滨海校区</router-link></li>  
        <li><router-link to="/chashan">茶山校区</router-link></li>  
        <li><router-link to="/yueqing">乐清校区</router-link></li>  
        <li><router-link to="/login">登录</router-link></li>  
     
      </ul>  
    </nav>  
  
    <router-view></router-view>  
  </div>  
</template>  
  
<script>  
export default {  
  name: 'App',  
};  
</script>  
  
<style>  

#app {  
  font-family: Avenir, Helvetica, Arial, sans-serif;  
  -webkit-font-smoothing: antialiased;  
  -moz-osx-font-smoothing: grayscale;  
  text-align: center;  
  color: #2c3e50;  
  margin-top: 60px;  
}  
nav {  
  background-color: #3498db;  
  padding: 10px;  
}  
nav ul {  
  list-style-type: none;  
  padding: 0;  
  margin: 0;  
  display: flex;  
  justify-content: center;  
}  
nav ul li {  
  margin: 0 10px;  
}  
nav ul li a {  
  color: white;  
  text-decoration: none;  
  padding: 5px 10px;  
  border-radius: 4px;  
  transition: background-color 0.3s;  
}  
nav ul li a.router-link-exact-active,  
nav ul li a:hover {  
  background-color: #2980b9;  
}  
</style>